<script setup>
import { Files, Location, Message, Memo } from '@element-plus/icons-vue'
</script>
<template>
  <el-menu
    :default-openeds="['1', '3']"
    style="min-height: 100%; overflow-x: hidden"
    background-color="rgb(48, 65, 86)"
    text-color="#fff"
    active-text-color="#ffd04b"
    :collapse-transition="false"
    router
  >
    <!--上面的router是配置路由，所有它子标签里面用index表示对应的路由映射链接-->
    <div style="height: 60px; line-height: 60px; text-align: center">
      <img
        alt=""
        style="width: 40px; position: relative; top: 12px; right: 2px"
        src=""
      />
      <b style="color: white; position: relative; right: -1px">后台管理系统</b>
    </div>
    <el-menu-item index="/admin/about"
      ><el-icon><location /></el-icon>主页展示</el-menu-item
    >
    <!--      </el-menu-item-group>-->
    <el-sub-menu>
      <template #title>
        <el-icon><Message /></el-icon>
        <!--eslint-disable-next-line-->
        <span slot="title">系统管理</span>
      </template>

      <el-menu-item index="/admin/user"
        ><el-icon><Files /></el-icon>项目管理</el-menu-item
      >

      <el-menu-item index="/admin/request"
        ><el-icon><Memo /></el-icon>请求管理</el-menu-item
      >
    </el-sub-menu>
  </el-menu>
</template>

<style scoped></style>
